<template>
  <div class="h-full flex flex-col bg-[#E1E3E5]">
    <Header>{{ t('Data integration platform') }}</Header>
    <div class="content flex-1">
      <div class="w-[800px] m-auto p-8">
        <div class="bg-white pb-8">
          <WrapVue>
            <template #title>
              <div class="center gap-2 font-bold">
                <AppstoreAddOutlined class="mr-8" />
                <div class="step-count">
                  {{ step }}
                </div>
                {{ t(step2name[step - 1]) }}
              </div>
            </template>
            <DataSource v-model:form="form" v-if="step === 1" v-model:step="step"></DataSource>
            <template v-else-if="step === 2">
              <Sql
                v-model:form="form"
                v-model:step="step"
                v-if="form.type === 'SQL' || form.type === 'FILE'"
              ></Sql>
              <Api v-model:form="form" v-model:step="step" v-else-if="form.type === 'API'"></Api>
              <Ftp v-model:form="form" v-model:step="step" v-else-if="form.type === 'FTP'"></Ftp>
            </template>
            <Fields v-else-if="step === 3" v-model:form="form" v-model:step="step"></Fields>
            <Store v-else-if="step === 4" v-model:form="form" v-model:step="step"></Store>
          </WrapVue>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import WrapVue from './components/Wrap.vue';
import Api from './form/Api.vue';
import { formData } from './form/data';
import DataSource from './form/DataSource.vue';
import Fields from './form/Fields.vue';
import Ftp from './form/Ftp.vue';
import Sql from './form/Sql.vue';
import Store from './form/Store.vue';
import type { DataConnectionForm } from './types';

const { t } = useI18n();

const step = ref<number>(1);

const step2name = ['Version', 'Datasource Setting', 'Data Connection', 'Data Store'];

const form = ref<DataConnectionForm>({
  ...formData,
});
</script>

<style lang="scss" scoped>
.content {
  @apply flex-1;
}
.step-count {
  border: 1px solid;
  @apply w-[24px] h-[24px] rounded-full center text-[18px];
}
</style>
